<template>
  <div
    class="rainbow-card box-radius box-shadow"
    @mouseenter="startSnow"
    @mouseleave="stopSnow"
    ref="cardRef"
  >
    <canvas
      ref="canvasRef"
      class="snow-canvas"
    ></canvas>
    <div class="card-content box-radius">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';

const cardRef = ref<HTMLDivElement>();
const canvasRef = ref<HTMLCanvasElement>();
let animationFrame: number;
let ctx: CanvasRenderingContext2D;
let isSnowing = false;

interface Snowflake {
  x: number;
  y: number;
  radius: number;
  color: string;
  speed: number;
  swing: number;  // 添加摆动参数
  swingSpeed: number;  // 添加摆动速度
}


// 生成随机颜色
const getRandomColor = () => {
  const colors = [
    '#ff6b6b', // 红
    '#4ecdc4', // 青
    '#45b7d1', // 蓝
    '#96ceb4', // 绿
    '#ffeead', // 黄
    '#ff9999', // 粉
    '#87ceeb', // 天蓝
    '#d4a5a5', // 粉褐
  ];
  return colors[Math.floor(Math.random() * colors.length)];
};

// 创建雪花
const createSnowflakes = (count: number): Snowflake[] => {
  const snowflakes: Snowflake[] = [];
  const width = cardRef.value?.offsetWidth || 0;

  for (let i = 0; i < count; i++) {
    snowflakes.push({
      x: Math.random() * width,
      y: 0,
      radius: Math.random() * 3 + 1,
      color: getRandomColor(),
      speed: Math.random() * 1.5 + 0.5,
      swing: Math.random() * 2 - 1,  // -1 到 1 之间的随机值
      swingSpeed: Math.random() * 0.01 + 0.01  // 随机摆动速度
    });
  }

  return snowflakes;
};

// 绘制雪花
let snowflakes: Snowflake[] = [];

// 开始下雪
const startSnow = () => {
  if (!isSnowing) {
    isSnowing = true;
    snowflakes = createSnowflakes(30);  // 增加雪花数量
    drawSnow();
  }
};

// 停止下雪
const stopSnow = () => {
  isSnowing = false;
  if (animationFrame) {
    cancelAnimationFrame(animationFrame);
  }
  if (ctx && canvasRef.value) {
    ctx.clearRect(0, 0, canvasRef.value.width, canvasRef.value.height);
  }
};

// 修改初始化Canvas部分
onMounted(() => {
  if (canvasRef.value && cardRef.value) {
    ctx = canvasRef.value.getContext('2d')!;

    // 设置Canvas尺寸，考虑内部padding
    const updateCanvasSize = () => {
      const rect = cardRef.value!.getBoundingClientRect();
      // 使用 clientHeight 而不是 offsetHeight，这样会包含padding区域
      canvasRef.value!.width = rect.width;
      canvasRef.value!.height = rect.height;
    };

    updateCanvasSize();
    window.addEventListener('resize', updateCanvasSize);
  }
});

// 修改雪花落地判断
const drawSnow = () => {
  if (!ctx || !canvasRef.value || !cardRef.value || !isSnowing) return;

  const width = canvasRef.value.width;
  const height = canvasRef.value.height;

  ctx.clearRect(0, 0, width, height);

  snowflakes.forEach((flake) => {
    ctx.beginPath();
    ctx.arc(flake.x, flake.y, flake.radius, 0, Math.PI * 2);
    ctx.fillStyle = flake.color;
    ctx.fill();

    // 更新位置
    flake.y += flake.speed;

    // 左右摆动
    flake.x += Math.sin(flake.y * flake.swingSpeed) * flake.swing * 0.2;

    // 确保雪花不会超出边界
    if (flake.x < 0) flake.x = width;
    if (flake.x > width) flake.x = 0;

    // 如果雪花落到底部，重新从顶部随机位置开始
    if (flake.y > height) {
      flake.y = 0;
      flake.x = Math.random() * width;  // 随机水平位置
      // 重置摆动参数
      flake.swing = Math.random() * 2 - 1;
      flake.swingSpeed = Math.random() * 0.01 + 0.01;
    }
  });

  if (isSnowing) {
    animationFrame = requestAnimationFrame(drawSnow);
  }
};

// 清理
onUnmounted(() => {
  stopSnow();
  window.removeEventListener('resize', () => {});
});
</script>

<style scoped lang="less">
.rainbow-card {
  position: relative;
  background: white;
  overflow: hidden;
  transition: all 0.3s ease;
  margin-bottom: 24px;

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .snow-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
  }

  .card-content {
    position: relative;
    z-index: 2;
  }
}
</style>
